<template>
    <div style="background-color: #fff;">
      <!-- 渲染顶层工序 -->
      
        <div v-for="(itemdata, indexdata) in hierarchy" style="min-width:200px;margin:10% auto;">
                <vue2-org-tree
                  :data="itemdata"
                  :horizontal="horizontal"
                  :label-class-name="labelClassName"
                  collapsable
                  :zoom="zoom"
                  :pan="pan"
                 
                  v-slot:toggle-icon="{ node, expanded }">
  
                </vue2-org-tree>
        </div>
      
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        labelClassName: "bg-color-orange",
          BasicSwich: false,
          BasicInfo: {},
          checked: true,
          horizontal: true,
          checked2: true,
          zoom: true,
             pan: true,
        hierarchy: [], // 存储转换后的工序层级结构
        rowData: [
      {
          "id": 145253,
          "peijianxuhao": 1,
          "daogongxu": "外发深镭射",
          "shengchanzhouqi": 13,
          "gongyinandu": null,
          "laiyuan": "自制",
          "peijianleixing": "白架",
          "bengongxuid": "烧焊",
          "bengongxu": "烧焊",
          "daogongxuid": "外发深镭射",
          "daopeijianleixing": ""
      },
      {
          "id": 146193,
          "peijianxuhao": 2,
          "daogongxu": "金打磨",
          "shengchanzhouqi": 2,
          "gongyinandu": null,
          "laiyuan": "外发",
          "peijianleixing": "白架",
          "bengongxuid": "外发深镭射",
          "bengongxu": "外发深镭射",
          "daogongxuid": "金打磨",
          "daopeijianleixing": ""
    
      },
      {
          "id": 11519,
          "peijianxuhao": 3,
          "daogongxu": "外发电镀",
          "shengchanzhouqi": 6,
          "gongyinandu": null,
          "laiyuan": "自制",
          "peijianleixing": "白架",
          "bengongxuid": "金打磨",
          "bengongxu": "金打磨",
          "daogongxuid": "外发电镀",
          "daopeijianleixing": "金属色架"
      },
      {
          "id": 131028,
          "peijianxuhao": 1,
          "daogongxu": "包装装配",
          "shengchanzhouqi": 4,
          "gongyinandu": null,
          "laiyuan": "外发",
          "peijianleixing": "金属色架",
          "bengongxuid": "外发电镀",
          "bengongxu": "外发电镀",
          "daogongxuid": "包装装配",
          "daopeijianleixing": ""
    
      },
      {
          "id": 122214,
          "peijianxuhao": 2,
          "daogongxu": "成品仓",
          "shengchanzhouqi": 7,
          "gongyinandu": null,
          "laiyuan": "自制",
          "peijianleixing": "金属色架",
          "bengongxuid": "包装装配",
          "bengongxu": "包装装配",
          "daogongxuid": "成品仓",
          "daopeijianleixing": ""
      },
      {
          "id": 65808,
          "peijianxuhao": 1,
          "daogongxu": "打脾",
          "shengchanzhouqi": 4,
          "gongyinandu": null,
          "laiyuan": "自制",
          "peijianleixing": "胶脾",
          "bengongxuid": "仓库脾开料",
          "bengongxu": "仓库脾开料",
          "daogongxuid": "打脾",
          "daopeijianleixing": ""
      
      },
      {
          "id": 13044,
          "peijianxuhao": 2,
          "daogongxu": "滚桶",
          "shengchanzhouqi": 7,
          "gongyinandu": null,
          "laiyuan": "自制",
          "peijianleixing": "胶脾",
          "bengongxuid": "打脾",
          "bengongxu": "打脾",
          "daogongxuid": "滚桶",
          "daopeijianleixing": ""
     
      },
      {
          "id": 125777,
          "peijianxuhao": 3,
          "daogongxu": "CNC",
          "shengchanzhouqi": 5,
          "gongyinandu": null,
          "laiyuan": "自制",
          "peijianleixing": "胶圈",
          "bengongxuid": "滚桶",
          "bengongxu": "滚桶",
          "daogongxuid": "CNC",
          "daopeijianleixing": ""
   
      },
      {
          "id": 46269,
          "peijianxuhao": 4,
          "daogongxu": "精雕",
          "shengchanzhouqi": 10,
          "gongyinandu": null,
          "laiyuan": "自制",
          "peijianleixing": "胶圈",
          "bengongxuid": "CNC",
          "bengongxu": "CNC",
          "daogongxuid": "精雕",
          "daopeijianleixing": ""
      
      },
      {
          "id": 6226,
          "peijianxuhao": 5,
          "daogongxu": "胶打磨",
          "shengchanzhouqi": 1,
          "gongyinandu": null,
          "laiyuan": "自制",
          "peijianleixing": "胶圈",
          "bengongxuid": "精雕",
          "bengongxu": "精雕",
          "daogongxuid": "胶打磨",
          "daopeijianleixing": ""
  
      },
      {
          "id": 88410,
          "peijianxuhao": 6,
          "daogongxu": "包装装配",
          "shengchanzhouqi": 3,
          "gongyinandu": null,
          "laiyuan": "自制",
          "peijianleixing": "胶圈",
          "bengongxuid": "胶打磨",
          "bengongxu": "胶打磨",
          "daogongxuid": "包装装配",
          "daopeijianleixing": "金属色架"
   
      },
      {
          "id": 35602,
          "peijianxuhao": 1,
          "daogongxu": "CNC前工序",
          "shengchanzhouqi": 5,
          "gongyinandu": null,
          "laiyuan": "自制",
          "peijianleixing": "胶圈",
          "bengongxuid": "仓库圈开料",
          "bengongxu": "仓库圈开料",
          "daogongxuid": "CNC前工序",
          "daopeijianleixing": ""
        
      },
      {
          "id": 110007,
          "peijianxuhao": 2,
          "daogongxu": "滚桶",
          "shengchanzhouqi": 0,
          "gongyinandu": null,
          "laiyuan": "自制",
          "peijianleixing": "胶圈",
          "bengongxuid": "CNC前工序",
          "bengongxu": "CNC前工序",
          "daogongxuid": "滚桶",
          "daopeijianleixing": ""
         
      },
      {
          "id": 125777,
          "peijianxuhao": 3,
          "daogongxu": "CNC",
          "shengchanzhouqi": 5,
          "gongyinandu": null,
          "laiyuan": "自制",
          "peijianleixing": "胶圈",
          "bengongxuid": "滚桶",
          "bengongxu": "滚桶",
          "daogongxuid": "CNC",
          "daopeijianleixing": ""
          
      },
      {
          "id": 46269,
          "peijianxuhao": 4,
          "daogongxu": "精雕",
          "shengchanzhouqi": 10,
          "gongyinandu": null,
          "laiyuan": "自制",
          "peijianleixing": "胶圈",
          "bengongxuid": "CNC",
          "bengongxu": "CNC",
          "daogongxuid": "精雕",
          "daopeijianleixing": ""
          
      },
      {
          "id": 6226,
          "peijianxuhao": 5,
          "daogongxu": "胶打磨",
          "shengchanzhouqi": 1,
          "gongyinandu": null,
          "laiyuan": "自制",
          "peijianleixing": "胶圈",
          "bengongxuid": "精雕",
          "bengongxu": "精雕",
          "daogongxuid": "胶打磨",
          "daopeijianleixing": ""
         
      },
      {
          "id": 88410,
          "peijianxuhao": 6,
          "daogongxu": "包装装配",
          "shengchanzhouqi": 3,
          "gongyinandu": null,
          "laiyuan": "自制",
          "peijianleixing": "胶圈",
          "bengongxuid": "胶打磨",
          "bengongxu": "胶打磨",
          "daogongxuid": "包装装配",
          "daopeijianleixing": "金属色架"
         
      }
  ],
      };
    },
    created() {
      this.hierarchy = this.buildReverseTree(this.rowData);
      console.log("dings:",this.hierarchy)
    },
    methods: {
  
     
      buildReverseTree(data) {
          // 1. 创建节点映射表和根节点集合
          const nodeMap = new Map(); // { daogongxuid: node }
          const rootNodes = [];       // 存储根节点（没有子节点的节点）
  
          // 2. 初始化所有节点并建立映射
          data.forEach(item => {
            const node = {
              id: item.id,
              name: item.daogongxuid,
              label: item.daogongxuid,
              peijianleixing: item.peijianleixing,
              bengongxuid: item.bengongxuid,
              daogongxuid: item.daogongxuid,
              daogonguxname: item.daogongxuid,
              bengongxuname: item.bengongxuid,
              children: []
            };
            nodeMap.set(node.daogongxuid, node);
          });
  
          // 3. 构建反向父子关系
          data.forEach(item => {
            const parentNode = nodeMap.get(item.daogongxuid);
            const childNode = nodeMap.get(item.bengongxuid);
  
            if (parentNode && childNode) {
              // 检查是否已存在相同 bengongxuid 的子节点
              const existingChildIndex = parentNode.children.findIndex(
                child => child.bengongxuid === childNode.bengongxuid
              );
  
              if (existingChildIndex !== -1) {
                // 如果已存在相同 bengongxuid 的子节点
                const existingChild = parentNode.children[existingChildIndex];
                
                if (existingChild.peijianleixing === childNode.peijianleixing) {
                  // 类型相同，合并子级
                  existingChild.children = [...existingChild.children, ...childNode.children];
                } else {
                  // 类型不同，添加为同级节点
                  parentNode.children.push(childNode);
                }
              } else {
                // 不存在则直接添加
                parentNode.children.push(childNode);
              }
            }
          });
  
          // 4. 识别根节点（没有作为 bengongxuid 出现的 daogongxuid）
          const allBengongxuids = new Set(data.map(item => item.bengongxuid));
          
          nodeMap.forEach(node => {
            if (!allBengongxuids.has(node.daogongxuid)) {
              rootNodes.push(node);
            }
          });
  
          // 5. 清理临时字段并格式化输出
          function formatNode(node) {
            const { bengongxuid, daogongxuid, ...rest } = node;
            return {
              ...rest,
              children: node.children.map(formatNode)
            };
          }
  
          return rootNodes.map(formatNode);
      },
  
  
      renderContent(h, rdata) {
              let day1 = this.$t('button.day');
              let languages = this.$t('language');
              return (<el-dropdown trigger='click' oncommand={(command) => this.handleAddDel(command, rdata)}>
                  <a><div style="display:flex;flex-direction: column;justify-content: center;color:#fff;height:30px;line-height:30px;padding:15px 0;">
                      <div>{rdata.daogongxuname}<strong>{rdata.peijianleixingname}</strong></div>
                      {/* <div style="font-size:12px;margin-top:4px;">({data.end_day - data.start_day + 1 +" "+ day1})</div>
                      {data.start == 1 || data.end == 1 ? data.start == 1 && data.end == 0?<div style="color:#42b983;">{data.start_day}-{data.end_day}</div>:<div style="color:#FF0000;">{data.start_day}-{data.end_day}</div>:<div>{data.start_day}-{data.end_day}</div>} */}
                  </div></a>
                  <el-dropdown-menu slot='dropdown'>
                      <el-dropdown-item command='addTreeSel'>添加新工序</el-dropdown-item>
                      <el-dropdown-item command='updateTreeSel'>编辑工序</el-dropdown-item>
                      <el-dropdown-item command='delTreeSel' >删除工序</el-dropdown-item >
                      <el-dropdown-item command='addProcess' >工序管理</el-dropdown-item >
  
                  </el-dropdown-menu >
              </el-dropdown >)
          },
    }
  };
  </script>
  
  <style scoped>
  ul {
    list-style-type: none;
  }
  
  li {
    margin: 5px;
    padding: 5px;
    background-color: #f9f9f9;
    border-radius: 4px;
  }
  
  div {
    padding: 10px;
    margin-bottom: 5px;
    font-size: 16px;
  }
  </style>
  